<template>
  <div ref="radar" class="radarBox"></div>
</template>

<script>
export default {
  mounted () {
    this.drawRadar()
  },
  methods: {
    // 绘制图表
    drawRadar () {
      /**
       * 思路：
       * 1. 获取实例echarts.init
       * 2. 调用实例方法setOption绘制图表=》传入不同的options配置对象，绘制不同的图表
       */
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(this.$refs.radar)
      // 绘制图表
      myChart.setOption({
        // 数据指示器
        tooltip: {},
        // 配置雷达图展示数据维度
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '考勤', max: 100 },
            { name: '工作效率', max: 100 },
            { name: '摸鱼', max: 100 },
            { name: '积极性', max: 100 },
            { name: '学习能力', max: 100 },
            { name: '编码能力', max: 100 }
          ]
        },
        // 雷达图数据设置
        series: [{
          type: 'radar',
          data: [
            {
              value: [10, 50, 60, 100, 90, 80],
              name: '李四'
            },
            {
              value: [100, 50, 80, 90, 100, 100],
              name: '王五'
            }
          ]
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.radarBox {
  width: 100%;
  height: 400px;
}
</style>
